import { MciSelect, MciSubCard, MciSwitch } from '@/components/base';
import { useFormMode } from '@/components/base/Form/mode';
import { ElText } from 'element-plus';
import { useDictStore } from '@/store/dict';
import { useCurrentNode } from '@/hooks/useCurrentNode';

export const MergeResult = defineComponent({
  setup() {
    const { dictListOperator } = useDictStore();
    const currentNode = useCurrentNode();
    const setConfig = currentNode.getConditionSetConfig();
    const setOpen = ref(setConfig?.enableListOperator || 0);
    const setType = ref(setConfig?.listOperator || null);
    const formMode = useFormMode();

    return () => {
      return (
        <MciSubCard title={'规则配置'}>
          <div class="flex flex-row items-center">
            <ElText tag="b">集合判断</ElText>
            <span class="ml-8"></span>
            <MciSwitch
              disabled={formMode?.mode !== 'edit'}
              modelValue={setOpen.value}
              active-value={1}
              inactive-value={0}
              onChange={(val: string | number | boolean) => {
                setOpen.value = val;
                currentNode.saveConditionSetConfig({
                  enableListOperator: setOpen.value,
                  listOperator: setType.value
                });
              }}
            />
            {setOpen.value === 1 && (
              <>
                <MciSelect
                  class="ml-8"
                  modelValue={setType.value}
                  list={dictListOperator.map((item) => {
                    return {
                      label: item.dictName,
                      value: item.dictCode
                    };
                  })}
                  filterable={true}
                  class="px-4"
                  onChange={(val: string | number | boolean) => {
                    setType.value = val;
                    currentNode.saveConditionSetConfig({
                      enableListOperator: setOpen.value,
                      listOperator: setType.value
                    });
                  }}
                />
              </>
            )}
          </div>
        </MciSubCard>
      );
    };
  }
});
